<button mat-button *ngIf="runtime" [routerLink]="'../../../..'"><i class="fas fa-chevron-left"></i> Runtime {{ runtime }}</button>
<button mat-button *ngIf="pallet" [routerLink]="'../..'"><i class="fas fa-chevron-left"></i> {{pallet}}</button>

<h1>Call Function</h1>

<ng-container *ngIf="call|async as call; else loadingOrError">

  <h2>{{call.callName}}</h2>

  <pre>{{call.documentation}}</pre>

  <h3>Arguments</h3>

  <ng-container *ngIf="(callArguments | async) as dataSource">
    <table mat-table [dataSource]="dataSource" [trackBy]="trackCallArgument">

      <ng-container matColumnDef="icon">
        <th mat-header-cell *matHeaderCellDef class="mat-cell--icon-cell"></th>
        <td mat-cell *matCellDef>
          <i class="fas fa-stream"></i>
        </td>
      </ng-container>

      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>Name</th>
        <td mat-cell *matCellDef="let arg">
          {{arg.name}}
        </td>
      </ng-container>

      <ng-container matColumnDef="type">
        <th mat-header-cell *matHeaderCellDef>Type</th>
        <td mat-cell *matCellDef="let arg">
          {{arg.scaleType}}
        </td>
      </ng-container>

      <ng-container matColumnDef="typeComposition">
        <th mat-header-cell *matHeaderCellDef>Type Composition</th>
        <td mat-cell *matCellDef="let arg">
          <pre>{{arg.parsedComposition | json}}</pre>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="visibleColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let myRowData; columns: visibleColumns"></tr>

    </table>

    <ng-container *ngIf="(fetchCallAttributesStatus | async) as status">
      <p *ngIf="status === 'loading'">Loading...</p>
      <p *ngIf="status === 'error'">Could not fetch runtime pallet call attributes.</p>
    </ng-container>

  </ng-container>
</ng-container>

<ng-template #loadingOrError>
  <ng-container *ngIf="(fetchCallStatus | async) as status">
    <p *ngIf="status === 'loading'">Loading...</p>
    <p *ngIf="status === 'error'">Could not fetch runtime pallet call.</p>
  </ng-container>
</ng-template>
